<template>
	<div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
				<div @click="goBack">
					<i class="iconfont baiColor">&#xe612;</i>
					<span class="baiColor">我的银行卡</span>
				</div>
			</div>
		</div>
		<div class="center">
			<div class="center_main" v-for="(card,index) in cards"  @click="xuan(card,index)">
				<div class="container clearfix" >
					<img :src="card.b_bankimg" alt="银行logo"/>
					<div class="right pull-left">
						<div class="ka pull-left">
							<p>{{card.b_bankname}}</p>
							<small>
		  						尾号{{card.b_bankcard}}
		  					</small>
						</div>
						<div class="xuan pull-right" style="line-height: 55px;">
							<i class="iconfont" :class="{'active':activeTF === index}" >&#xe637;</i>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				activeTF:"",	//判断是否选中
				activeId:"",	//获取选中的id
				cards:[
					{
						b_bankimg: '',	//银行卡图片
						b_bankname: '',	//银行卡名称
						b_bankcard:''	//账号
					},
				],

				payBankdata:{
	//				改变后后台需要的数据
					isShow:true,
					bank_id:"", //银行卡id
//					展示到页面
					img:"",	//银行logo
					tail:"",		//银行卡号 只取后四位
					showname:"",	//卡名称
				}
				
			}
		},
		mounted(){
			let _this = this;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);	//客户秘钥（信息）
			this.$axios({
			   url:"Home/User/MyBankcard",
				method:"post",
				data:params
			  }).then(function(res){
			   	_this.cards = res.data.data;
			   	_this.short();
			}).catch(function(err){
				console.log(err)		
			})
		},
		methods: {
			//点击返回
			goBack(){
				this.$emit("myevent",this.payBankdata);
			},
//			选择银行卡
			xuan:function(card,index){
				//改变后的前端展示
				this.payBankdata.img = card.b_bankimg;
				this.payBankdata.tail = card.b_bankcard;	//卡号
				this.payBankdata.showname = card.b_bankname;	//卡名称
//				改变后发往后台
				this.payBankdata.bank_id = card.b_id;	//银行卡id
//				改变前端样式
				this.activeTF = index;
				this.activeId=this.cards[index].cardImg;
			},
			//银行卡号显示后四位
			short: function() {
				this.cards.forEach(function(cards){
					if(cards.b_bankcard.length > 4) {
						cards.b_bankcard = cards.b_bankcard.substr(cards.b_bankcard.length-4);
					}
				})
			}
			
		},
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	.active{
		color:#FCB517 !important;
	}
	.header_left span {
		line-height: 20px;
		font-size: 18px;
	}
	
	.center {
		width: 95%;
		margin: 0 auto;
		padding-top: 47px;
	}
	
	.center .center_main {
		background: #fff;
		height: 75px;
		margin-bottom: 5px;
	}
	
	.center .center_main .container {
		overflow: hidden;
		padding: 10px;
	}
	
	.center .center_main img {
		float: left;
		width: 44px;
		height: 44px;
		margin-top: 5px;
		margin-right: 8px;
		border-radius: 50%;
	}
	
	.center .center_main .right {
		width: 80%;
	}
	
	.center .center_main .right p {
		color: #333;
		font-size: 15px;
	}
	
	.center .center_main .right small {
		display: inline-block;
		font-size: 12px;
		color: #999;
		margin: 16px 0;
	}
	.xuan i{
		color: #333;
	}
</style>